<?php /*a:2:{s:41:"D:\www\long_shop\app\view\acc\fee_bi.html";i:1702389678;s:42:"D:\www\long_shop\app\view\common\head.html";i:1702389678;}*/ ?>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/jquery/jquery-1.12.4.min.js"></script>    
    <link href="/static/bst5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/bst5.3.2/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="/static/bst-icons/font/bootstrap-icons.css">
    <script src="/static/layer/layer/layer.js"></script>
    <link rel="stylesheet" href="/static/css/my.css">    
</head>
<head>
    <title>费用试图</title>
    <link rel="stylesheet" href="/static/flatpickr/flatpickr.min.css">
    <script src="/static/flatpickr/flatpickr.min.js"></script>
    <script src="/static/echarts.min.js"></script>
<style type="text/css">
    input{display:initial!important;}
</style>    
</head>
<body >

    <div class="container-fluid " >
    <form action="/index.php/acc/fee_bi" method="post">
        <div class="row" id="query_bar" style="height: 50px;line-height: 50px;">
            <div class="col">

            <label for="dept_id">驾校：</label>  
            <select name="dept_id" class="form-control" style="display:initial!important;width: 140px;">
              <option value="all" <?php if($dept_id=='all'): ?> selected <?php endif; ?>>所有驾校</option>
              <?php foreach($school as $kv): ?>
                <option value="<?php echo htmlentities($kv['id']); ?>" <?php if($dept_id==$kv['id']): ?> selected <?php endif; ?>><?php echo htmlentities($kv['name']); ?></option>
              <?php endforeach; ?>
            </select>

            <label for="order_no" >
                <input class="form-control" type="text" value="<?php echo htmlentities($sdate); ?>" id="sdate" name="sdate" placeholder="开始日期" />
            </label>

            <label for="sdate" >
                <input class="form-control" type="text" value="<?php echo htmlentities($edate); ?>" id="edate" name="edate" placeholder="结束日期" />
            </label>   

            <button type="button" class="btn btn-warning query" style="vertical-align: middle;" >
                <span class="bi-search" ></span>
            </button>            
        
            </div>

        </div>
    </form>

      <table class="table table-sm table-striped" >
        <thead>
          <th>序号</th>
          <th>驾校</th>
          <th>类型</th>
          <th>金额</th>

          <th>
<!--        <button type="button" class="btn btn btn-primary">
                <a href="/index.php/customer/charge" alt="充值"><span class="bi-cash" style="color:white;">充值</span></a>
            </button> -->
          </th>
        </thead>
        <tbody>
          <?php foreach($list as $k=>$log): ?>
          <tr>
            <td><?php echo htmlentities($k+1); ?></td>
            <td><?php echo htmlentities($log['dept_id_name']); ?></td>
            <td class="type_name"><?php echo htmlentities($log['type_name']); ?></td>
            <td class="money" style="color:<?php if($log['money']<0): ?> red;<?php endif; ?>"><?php echo htmlentities($log['money']); ?></td>
            
            <td></td>
          </tr>
          <?php endforeach; ?>
          <tr style="background:#cfe2ff;">

          </tr>

        </tbody>
      </table>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    </div>

<script type="text/javascript">
    var items =[];
    var moneys=[];
    var data2 =[];

    $(function(){

        $.each($('table .type_name'),function(){
            items.push($(this).text());
        })
        $.each($('table .money'),function(){
            moneys.push($(this).text());
        })      

        for(var i=0;i<items.length;i++){
            data2.push({value:moneys[i],name:items[i]});
        }



        console.log(data2)

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '驾校收付款示意图'
            },
            tooltip: {},
            legend: {
                data:['xx']
            },
            xAxis: {
                data: items
            },
            yAxis: {},
            series: [{
                name: '金额',
                type: 'bar',
                data: moneys
            }]
        };

        option2 = {
            series : [
                {
                    name: '首付款占比',
                    type: 'pie',
                    radius: '55%',
                    roseType: 'angle',
                    data:data2
                }
            ]
        };        

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


    flatpickr("#sdate", {});
    flatpickr("#edate", {});

    $(".sdate").flatpickr({
        enableTime: true,
        dateFormat: "Y-m-d H:i:s",
    });
    $(".edate").flatpickr({
        enableTime: true,
        dateFormat: "Y-m-d H:i",
    });

    $(".query").on('click',function(){
        var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

        $("form").submit();
        layer.close(index);
    })    
  })


  




</script>


</body>
</html>
